約 5,801,802 件
https://w.atwiki.jp/araiguma/pages/41.html
ここは表示しないよ(stylilshとかで使うと広告とかを消せる) div #ads{ display none; } class="example なら必ず背景が画像になるときのcss .example { background #FFFEF0 url(img/example.gif) no-repeat; border 1px solid #DDD0C0; font-size small; padding 15px; } @wikiの広告を消すためのcss div #atwiki_google_afc_1{ display none; } div#ads{ display none!important; } リンク とほほのスタイルシート入門 http //www.tohoho-web.com/css/index.html zen garden http //www.csszengarden.com/tr/japanese/ css実践講座 http //css.uka-p.com/
https://w.atwiki.jp/false999/pages/16.html
CSSメモ link rel="stylesheet" href="*.css" CSSファイルを読み込める 画像の中央揃えに手間取ったので、メモ CSSだけで画像を上下中央に配置する が非常に参考になった。 imgタグをdivで囲み画像をdivの中央に表示できる。 css内で、divとimgに次の要素を与えることで、できた。 実際には、クラスやidを使ってより範囲を絞った方がよい。 div { display table-cell; text-align center; vertical-align middle; } div img { vertical-align middle; }
https://w.atwiki.jp/you-matu/pages/54.html
CSSレイアウト実践講座 商用利用可能なCSSテンプレート|Htmlテンプレート bkanklink CSSでレイアウトするなら絶対覚えておきたい配置のルール http //kachibito.net/web-design/12-study-css-technique.html
https://w.atwiki.jp/raisyo/pages/63.html
CSS講座 CSS関係で質問しあいましょう。 ここでは@wikiで良く使うCSSをかいていきます 特別なcssは教えれないので^^ ありそうな質問 Q.CSSてなんですか?? A. ここ をお読みください。 Q.@wikiのcssてどこに書き込めばいいんですか?? A.@wikiバーの『設定』から『CSSカスタマイズ』を選べば書き込める場所があります。 まずは今のデザインのCSSを確かめよう。 1期 デザインのcssを確かめます。 まずは現在のデザインを確かめましょう。ここでは『新デフォルト』という設定で話していきます。 『cssカスタマイズ』で[現在のデザインのCSS]をクリックします(画像1参照) 〈ファイルを開くアプリケーションの選択〉がでると思うので,メモ帳(Notepad)などで現在のcssを開きます。 開いたらわけ分からない文字がたくさん出てきましたね(画像2参照) それをCtrl+aもしくは右クリック→すべて選択で選んですべてをコピーして『CSSカスタマイズ』の[ユーザ定義CSS]というところに貼り付けます。 これで現在のデザインのCSSを表示しました。 1期はこれで終了です。 +画像1 +画像2 2期ではcssを変える勉強をします。 ついにcssをいじくってみよう 2期 ついにcssを改造します。 1期で[ユーザ定義]というところに貼り付けたことを前提として話をすすめます。 貼り付けたらcssが表示されましたね。まずはbodyを変えてみましょう。 bodyは簡単に言うと後ろの背景です。『新デフォルト』だと最初は黄土色みたいな色ですね。 『新デフォルト』のデフォルトのbodyタグは body{ color #000; margin 0; text-align center; width 100%; height 100%; background #eee url(http //img.atwiki.com/image/default_new/o.gif)repeat; font-size 12px; } です。background #eee url(http //img.atwiki.com/image/default_new/o.gif) repeat;で背景の画像を構成しています。ここのurl( http )の( )内のhttpアドレスを変えたらその画像を表示できます。 4. width xxx%は横の大きさ,height xxx%は縦の大きさです。 えー。お元気ですか?管理人のライガです。 ここでは題名のとうりCSSの講座を開いています。 ここのページで是非CSSを覚えて自分の@wikiで使いましょう。 -- ライガ@管理人 (2010-01-02 01 04 05) 日々更新するつもりです。 -- ライガ管理人 (2010-01-02 01 58 03) CSSを1からつくる人がいるそうです 頭がよすぎますw -- 慈100%@福管理人 (2010-01-03 22 17 32) どこにですかw -- ライガ@管理人 (2010-01-03 22 41 44) 世界のどこかにはいるでしょうw まずCSSの配布サイトの方は自分ですべてを作成する方もいるでしょうw 僕もCSSをいじくってみましたが最近少しずつわかってきた気がしますw -- もっしー (2010-01-04 17 52 37) www そりゃあそういう関係の人はつくるでしょうねぇ。 これからも誰でも分かりやすくできるよう解説を続けていきます。 -- ライガ@管理人 (2010-01-04 18 11 35) サイトの幅をどうやって大きくするのですか? ここのサイトはデフォルトに比べて明らかに背景が大きいので。。。 お願いします -- 名無しさん (2010-01-16 04 11 59) あの、あなた慈さんですよね。。。 何で名無し投稿なんですか? -- ライガ@管理人 (2010-01-16 11 07 07) すみません書き忘れです。 では、よろしくお願いします -- 慈100%@福管理人 (2010-01-17 20 08 55) 当サイトの利用規約の禁止事項4番に違反しないのなら良いですが。 横幅だけですと #wrapper { width xxx%; } ですね。 xxxのところに数字を入力してください。 -- ライガ@管理人 (2010-01-17 21 43 42) あ、すみませんそれはできます。 僕のWIKI見れば分かるんですがページの一番下にスクロールするカーソル?みたいなのがあるんです それを消したいのです 分かりにくいですがお願いします -- 慈100%福管理人 (2010-01-18 01 34 34) 元の大きさが100%なので100にしてみてください。 -- ライガ@管理人 (2010-01-18 18 09 09) 分かりません あきらめた -- 慈100%福管理人 (2010-01-19 20 28 51) えぇw -- ライガ@管理人 (2010-01-19 23 23 23) そろそろ3期に突入しますか。 -- ライガ@管理人 (2010-01-24 01 21 22) がんばってくださいw -- 慈100%@福管理人 (2010-01-24 18 14 31) ついにできた! -- 慈100%副管理人 (2010-01-24 23 18 50) チャットの設置の仕方を教えてください。 -- t o t t i (2010-01-31 17 57 33) 「chatx」で検索してください。 -- ライガ@管理人 (2010-01-31 18 01 22) できないですww -- t o t t i (2010-01-31 19 53 39) whocares で検索してください -- 慈100%吹く管理人 (2010-02-01 00 07 47) テキスト欄の幅を広げる方法を教えてください。 -- トッティ (2010-03-15 16 59 34) #main { float right; width xxxpx; } ↑を追加してください。 ちなみにxxxの所は数字を入力してください。 999とかかなりでかいと思います。 -- ライガ管理人 (2010-03-15 20 16 27) ありがとうございます。 -- トッティ (2010-03-16 00 03 43) 不具合があったらお知らせください。 -- ライガ管理人 (2010-03-16 00 11 46) メインのところをでかくしてメニューを元の位置にもどす方法を教えてください。 -- トッティ (2010-03-16 16 23 41) #wrapper, #content { width 1000px; } #menu { float left; width 200px; } #main { float right; width 800px; } これでok -- ライガ管理人 (2010-03-16 16 30 28) ためになりました 参考にさしてもらいます -- ★リサイクル★ (2010-04-13 19 14 17) リサイクルさん #wrapper,#contentのところは、 #wrapper,#content,#header{ width 1000px; } にすることをオススメします。 -- 管理人 (2010-04-14 15 01 13) いろいろと教えてください( _ ) -- トッティ (2010-06-08 18 32 20) 何を教えて欲しいですか? 質問に応じ答えます。 サイト1周年が近いのでサービスです^^ -- 管理人 (2010-06-08 22 17 01) 配布サイトにあるCSSテンプレートを自分のサイトに設置することは可能ですか? できるのであればやり方を教えていただけませんか? -- トッティ (2010-06-09 17 12 00) 配布サイトとは具体的にどのようなものですか? 因みにCSSはどのサイトでも共通なので使えます。 -- 管理人 (2010-06-09 19 17 58) CSSとかめんどいから設定し ねえ。 デザインにまかせる。 -- たか&ゆき (2010-06-21 16 19 40) そーですかw -- 管理人 (2010-06-21 19 09 34) CSSはかなり重要だと思いますが・・・・ だって@wiki以外のサイトはこれだけでサイト作るんですよ。 デザインとかありませんし、サイトカスタマイズにはかなり必要になってくると思うんですが・・・・ 人それぞれですね -- 申公豹 (2010-06-21 22 02 27) だいたいHTML自体ほとんど知らないからHPは@wikiにした。 -- taka yuki 僕はみんながやってるからなんとなく… -- 管理人 (2010-06-22 17 17 46) 急な質問なんですが、http //~~~~/main.cssで、 CSSを見れないようにしたいのですが、どうしたらいいのでしょうか?? -- ディナイ (2010-06-24 17 00 49) それは恐らく無理だと思います。 最善の方法は、見られる方法を他の人に教えないことくらいしかありませんね。 -- 管理人 (2010-06-24 17 07 06) でも、ここのCSSは開けないですよ?? -- ディナイ (2010-06-24 21 09 07) え、それってw -- 申公豹 (2010-06-24 22 35 17) えッ、まじですかッ 夕方くらいに確かめてみます -- ライガ管理人 (2010-06-25 01 00 19) っていうか開く行為はお止めくださいwディナイさん。 -- ライガ管理人 (2010-06-25 01 01 18) 普通に開けました( A‘) -- 管理人 (2010-06-25 17 01 23) 開けますか・・・端末によって違うのかな?? 後、勝手に実験してすみません;; -- ディナイ (2010-06-25 21 13 06) ソースを使いますからね~ というかCSS開けないってどういう風に表示されるのでしょうね。 -- 申公豹 (2010-06-26 00 16 47) 端末かぁ・・・僕はWin/IE6で開きました。 実験してすいません いいですよ^^ -- ライガ管理人 (2010-06-26 02 44 07) 申公豹さん Internet Explorerでは、12.atwiki.jp - main.css をダウンロードできません。 このインターネットのサイトを開くことができませんでした。要求されたサイトが使用できないか、見つけることができません。後でやり直してください。 と出てきます。 -- ディナイ (2010-06-26 11 52 27) 後、自分の端末はWin/IE5.5です。 連レスすみません。。 -- ディナイ (2010-06-26 11 53 55) ココのサイトだけなのですか? -- 管理人 (2010-06-26 12 11 03) いや、自分のサイト以外ほぼ全部・・・・w -- ディナイ (2010-06-26 16 10 35) ほかの(12.atwiki.jp)のつく@wikiのサイトも実験してみては? おそらくここの@wikiに限らず12.atwiki.jpは開けない可能性があります。 まあ、なぜ開けないのかはわかりませんが。 -- 申公豹 (2010-06-26 16 21 20) CSSではないですが、編集で聞きたいことがありまして… リンクを無効にするにはどうしたらよいのですか? 参考で言うと、このサイトの相互リンクのところのバナータグのところみたいなのです。 文章力ないんで何言ってるのかわからなかったらまた返事をください。 -- トッティ (2010-07-01 17 46 00) nolink(こんなかにリンク)を使うことで簡単に出来るよ -- 管理人 (2010-07-01 17 50 33) ありがとうございます。 -- トッティ (2010-07-01 19 26 27) ヘッダっていうかこのサイトみたいにサイトの上部にメニューを作りたいのですがどうやったらできますか? サイト上の☆☆☆☆ ☆☆☆☆に囲まれているところみたいにです。いきなり現れて図々しくてすみませんM(_ _)M -- DS (2010-07-19 21 47 46) おれもききたい -- たか&ゆき (2010-07-21 14 34 11) えーっつと説明が難しいですね・・・ まぁCSSでやってますが。 PCが現在壊れていて使えないので復活(購入)次第書きますね。 -- ライガ (2010-07-22 00 32 12) 遅いかもしれませんが僕も聞きたいです -- PSP (2010-07-26 08 48 04) メニュー幅とテキスト幅のサイズはどのくらいがいいですか? ※2カラムです -- かなで (2010-07-26 22 41 15) テキスト幅とはここのページのようにメインページのことですか? 割合的に言うと全体を1000pxとするとメニュー2~300px、メインを700~800pxでいいのではないでしょうか。 -- ライガ (2010-07-27 00 52 56) メニューは200~300です -- ライガ (2010-07-27 00 54 03) 有難う御座います 参考にさせて頂きます -- かなで (2010-07-27 11 18 47) また、質問すいません。 右メニューにあるような枠を作成するにはどうすればいいですか? -- かなで (2010-07-28 00 30 52) お知らせのとこ? @wikiなら ご利用ガイドで divstyle で検索してみてください。 -- たか (2010-07-29 15 45 11) たかさん 少し説明不足でしたorz その下の『サブメニュー』の枠の作り方です -- かなで (2010-07-29 16 25 46) ↑ ゆきつけんの忘れたWWWWW テーブルタグで出来ます。 改行は で出来ます |リンクAリンクB| などでできるかとおもいまっせ -- たか ゆきうい ↑ミスった br()だと思います -- たか ゆきうい nowikiタグ成功したwwwww -- たか ゆきうい たか ゆきさん テーブルタグでも一応できるんですが 文字間隔が狭い、『-』が使えない、綺麗にテーブルタグを拡大できない案件があるんです -- かなで (2010-07-29 22 11 14) たわし。 わからないです。 知識不足でスミマセン -- たか ゆきうい かなでさん PCが使える日にかなでさんのサイトのメンバー専用ページまたはチャットで話しますね。 あまり広めたくないので・・・w -- ライガ (2010-07-30 18 17 02) たか ゆきさん こちらこそ高レベルな質問をしてすいません ライガさん ありがとうございます -- かなで (2010-07-30 21 29 00) くそぉナヴィゲーションバー生じされねえ -- たか&ゆき (2010-08-06 15 00 51) コメフォ小さいから誤字が見つけずらいw -- たか&ゆき (2010-08-06 15 01 39) この前質問したDSです、返事遅れてすみません 図々しい質問に関わらず答えてくださってありがとうございます ライガさんがパソコン使える日まで首を長くして待ってます -- DS (2010-08-07 21 19 44) たか&ゆきさn そんなにコメフォ小さいでしょうか?w DSさん かなでさん同様チャットで話しますね。 -- 管理人 (2010-08-08 14 22 52) 俺のことわすれてない? メールで送ってくれw もしかしたらオレンジロゴナヴィゲーションバー表示されないかもなw -- たか&ゆき (2010-08-12 10 04 44) ライガさん ありがとうございます(;▼;) -- DS (2010-08-12 10 55 44) あの、ライガさんやトッティさんのサイトの トップバナーはクリックできませんよね。 どのようなCSSを使ってるんですか。 -- メテウス (2010-08-21 06 57 55) トップバナー・・・一番上の大きな画像のことを指しているのでしょうか? -- 管理人 (2010-08-21 14 44 09) はい、説明が不足していてスイマセン。 -- メテウス (2010-08-21 15 35 03) ライガさん!パソコン治りましたでしょうか!? パソコンが壊れてて大変そうですので、アランさんにも同じ質問をしました アランさんはライガさんの許可が下りたら教えてもいいとおっしゃってくれています、許可してもらえるでしょうか ほんとに図々しくてすみません、、、 -- DS (2010-09-19 20 12 26) このサイトのトップタイトルバナーランダムに表示されるけどどうやってやんの? 教えてくださいな -- DKR (2010-09-20 23 44 21) リンクをテーブルに指定したいんですが、 このように 表示できるhtmlかcssがあれば教えてください。 -- 神竜 (2010-10-21 00 43 12) ↑すみません自己解決しました -- 神竜 (2010-10-26 23 54 36) あ? -- あ (2011-01-04 18 07 06) レスありがとう。詳細はこれです(´-ω-)★ http //s.64n.co/ -- 俺だ (2012-01-05 08 55 07) 名前 コメント
https://w.atwiki.jp/naobe/pages/75.html
WEBアプリケーションに戻る とほほのCSS入門参照 記述 タグ内 span style="color red;" あいうえお /span div style="color red;" あいうえお /div ページ html head title Style Sheet Sample /title style TYPE="text/css" !-- H1 { color red; } -- /style /head body h1 あいうえお /h1 h1 かきくけこ /h1 /body /html 外部ファイル head link rel="stylesheet" type="text/css" href="xxx.css" /head 適用箇所の指定 ID #elm123 { color red; } H1#elm124 { color green; } span ID=elm123 あいうえお /span h1 ID=elm124 かきくけこ /h1 クラス html head title テスト /title style type="text/css" !-- P.red { color red; } P.green { color green; } -- /style /head body p class=red これはredクラスです。 /p p class=green これはgreenクラスです。 /p /body /html 値の単位 99cm ... centimeters 99em ... font-sizeの高さを"1"とした相対指定。【例】1em 1フォントサイズ。font-sizeにemを指定した場合は、親要素のフォントサイズに対する相対指定になる。 99ex ... 現在の英字の"x"の高さを"1"とした相対指定 99in ... inches 99mm ... millimeters 99pc ... picas 99pt ... points 99px ... pixels スクロール http //allabout.co.jp/gm/gc/23865/3/ 参照 style type="text/css" p.infobox { height 5em; overflow auto; border red 1px dashed; } /style 段組 中央に配置 div.body { margin 0 auto; } フォーム入力時の全角/半角モードを指定 eWEB 参照 【全角】 .txtmode1 { ime-mode active; } 【半角】 .txtmode2 { ime-mode inactive; } インラインスタイルシート meta http-equiv="Content-Style-Type" content="text/css" / が必要 【使用例】 p style="color red" これは赤い文字の段落。 /p デバッグ http //blog.webcreativepark.net/2010/07/03-202546.html 参照
https://w.atwiki.jp/hgsk/pages/28.html
CSS フレームワーク YUI YUI Blueprint CSS BlueprintCSS version 0.8 CheatSheet Blueprint Grid CSS Generator
https://w.atwiki.jp/igmjapan/pages/19.html
設定項のstylesheetにCSSのスタイルシートを設定することが出来るが、ここに記述することでも適用可能。 例 背景、フォント、テキストの色 CSS #game { background cornflowerblue; font-family "Times New Roman",Times,serif; color black; } 背景縁取り CSS .thing { border-radius 8px; background rgba(255,255,255,0.5); } アイコンのサイズを変える CSS .thing-icon,.particle { width 64px; height 64px; } まだ購入できないものにぼかしをかける ※#game.filtersOnを有効にしておく必要あり CSS #game.filtersOn .thing.cantAfford.notOwned { filter blur(3px); }
https://w.atwiki.jp/yuto51/pages/22.html
CSSの編集について CSSをいじるとこのwikiのデザインを好きに変える事が出来ます。が、管理人がCSSについて知識が無いため、やりたいという方がいたらお任せしたいと思います。 CSSのカスタマイズ CSSのカスタマイズには管理者権限が必要です。変更を希望する場合は管理人yuto51までお知らせください。 CSSのHTML構造 現在わかっている新デフォルト(オレンジ色のやつね)のHTML構造を載せておきます。変更の際に参考にしてください。 body ├#top(空) └#wrapper(全体囲み) ├#head_editmenu(ログイン) └#wrapper2(全体囲み) ├#header, #header2(タイトル) │└h1.sitename(サイト名) │ └span.pagename(ページ名) ├#content(メイン及びメニューの全体囲み) │├#main(メイン囲み) ││├.pageinfo(ページ編集) ││├#mainbody, #mainbody2(本文囲み) ││├.pageinfo(トラックバック, リンク元) ││├#ad(広告) ││├#attach(添付ファイル一覧) ││└footname(注釈) │└#menu(メニュー囲み) │ └#menubody, #menubody2(上記と同じ) ├#foot_editmenu(下部編集メニュー) └#footer(RSSと@wikiリンク)
https://w.atwiki.jp/allegory/pages/55.html
CSS Cascading Style Sheets 目的 文章の論理構造を記述するHTMLから装飾的な記述を分離する事が目的です。 文章構造が同じで、CSSのみを変更すれば楽にデザインを変更する事が可能になる。 HTML?には構造のみを記述する。 装飾要素はCSSに記述する。 インデックス 目的別インデックス IEM制御を行う(IEのみ) 印刷関連
https://w.atwiki.jp/marchetype/pages/35.html
CSS 練習サイト http //www.2step-css.com/ padding 〔pǽding〕 詰め物(の材料)、(演説・文章などの)不必要な挿入語句, 埋めくさ、(帳簿の)水増し(経費) pad 衝撃・損傷などを防ぐ)当て[詰め]物;(服の肩などの)パッド;(球技用の)胸[すね]当て;(いすなどの)敷き物, 座ぶとん padding とmargin はセットで覚えるべし http //www.htmq.com/style/padding.shtml